<template>
	<view style="height: 100vh;">
		<view class="renzheng">
			<view class="content">
				<view class="top1">
					投诉&建议标题
				</view>
				<view class="top3">
					<textarea name="" id="" maxlength="20" cols="30" rows="10" class="custTextarea" placeholder="请输入"
						v-model="compForm.title"></textarea>
				</view>
			</view>
			<view class="content d-b-c" @click="getOrderId">
				<view class="top1">
					订单id
				</view>
				<view class="top3">
					{{compForm.order_id}}
					<text class="icon iconfont icon-jiantou"></text>
				</view>
			</view>
			<view class="content">
				<view class="top1">
					投诉说明
				</view>
				<view class="top3">
					<textarea name="" id="" maxlength="500" cols="30" rows="10" class="descriptionTextarea"
						placeholder="详细输入时有助于我们更好解决问题~" v-model="compForm.content"></textarea>
				</view>
			</view>
			<view class="content">
				<view class="top1">
					上传图片
				</view>
				<view style="display: flex;">
					<view v-for="(item,index) in imageList">
						<image :src="item" mode="aspectFit" style="width: 160rpx;height: 160rpx;" ></image>
					</view>
					<view
						style="width: 160rpx;height: 160rpx;display: flex;justify-content: center;border: 1px solid #999;margin-left: 6px;"
						@click="chooseImageFunc" v-if="imageList.length<3">
						<u-icon name="camera" size="28"></u-icon>
					</view>
					<!-- <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload> -->
				</view>
			</view>
		</view>
		<view class="btns">
			<button class="confirm-btn" @click="confirmFunc(form)">确认提交</button>
		</view>
		<u-popup :show="selectOrderVis" @close="closePopup" mode="bottom" :duration="400" :round="20" :closeable="false"
			:overlay-opacity="0.6" :zoom="false" :lock-scroll="true" :mask="true" @touchmove.stop.prevent=""
			style="height: 72vh;">
			<scroll-view scroll-y="true" @scrolltolower="scrollLower">
				<view class="order-list">
					<view class="item" v-for="(item, index) in listData" :key="index">
						<view class="d-b-c ">
							<view class="item-dianpu" @click="toShop(item.supplier.shop_supplier_id)">
								<view class="item-d-l mr10">
									<i class="icon iconfont icon-dianpu1"></i>
									<text class="fb gray3 f32" v-if="item.supplier">{{item.supplier.name}}</text>
								</view>
								<view>
									<i class="icon iconfont icon-jiantou"></i>
								</view>
							</view>
							<view class="state">
								<text class="redF6"
									style="color: #00C8BE;">{{ item.order_status.value == 40?'已驳回':item.state_text }}</text>
							</view>
						</view>
						<u-line margin="24rpx 0"></u-line>
						<view class="order-head d-b-c">
							<view>
								<!-- <text class="state-text">{{ item.order_source_text }}</text> -->
								<text class="shop-name flex-1 fb">订单号：{{ item.order_no }}</text>
							</view>
							<view v-if="item.return_reject"
								style="border-radius: 0px 100rpx 100rpx 0px;background: #00C8BE;height: 40rpx;color: #fff;padding: 0 15rpx;font-size: 24rpx;text-align: center;line-height: 40rpx; ">
								<text class="shop-name flex-1 fb" style="color: #fff;">归还驳回</text>
							</view>
						</view>

						<!--多个商品显示-->
						<view class="product-list pr" v-if="item.product.length > 1" @click="gotoOrder(item.order_id)">
							<scroll-view scroll-x="true">
								<view class="list d-s-c pr100">
									<view class="cover mr10" v-for="(img, num) in item.product" :key="num">
										<image :src="img.image.file_path" mode="aspectFit"></image>
									</view>
								</view>
							</scroll-view>
							<view class="total-count">
								<view class="left-shadow"></view>
								<view class="price f24">
									¥
									<text class="f32">{{ item.pay_price}}</text>
								</view>
								<view class="count">共{{ item.product.length }}件</view>
							</view>
						</view>
						<view class="one-product d-s-c" v-else @click="gotoOrder(item.order_id)">
							<view class="cover" v-for="(img, num) in item.product" :key="num">
								<image :src="img.image.file_path" mode="aspectFit"></image>
							</view>
							<view class="" style="margin-left: 37rpx;">
								<view class="pro-info flex-1" style="margin-bottom: 4rpx;font-size: 32rpx;">
									{{ item.product[0].product_name }}
								</view>
								<view style="margin-bottom: 10rpx;font-size: 30rpx;">
									租期：{{item.lease_time}}期
								</view>
								<view style="color: #46454E;font-weight: 500;">
									总租金：¥{{ item.bill_price }}
								</view>
							</view>

							<view class="total-count">
								<view class="left-shadow"></view>
							</view>
						</view>
						<view class="order-bts">
							<block>
								<button @click="compSelectOrder(item.order_id)" class="themeBtn-border">选择此单</button>
							</block>
						</view>
					</view>

				</view>
			</scroll-view>
		</u-popup>
		<upload v-if="isUpload1" @getImgs="getImgsFunc1" />
	</view>
</template>

<script>
	import upload from "@/components/upload/upload.vue"
	export default {
		data() {
			return {
				selectOrderVis: false,
				listData: [],
				loading: true,
				page: 1,
				list_rows: 10,
				typeId: "",
				compForm: {
					order_id: "",
					title: "",
					content: "",
					images: [],
					type_id: ""
				},
				totalData: 0,
				imageList: [],
				isUpload1: false

			}
		},
		methods: {
			chooseImageFunc(e) {
				let self = this;
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						self.uploadFile(res.tempFilePaths);
					},
					fail: function(res) {
						console.log(res,'failRes')
					},
					complete: function(res) {}
				});
			},
			uploadFile(tempList) {
				let self = this;
				let i = 0;
				let img_length=tempList.length;
				let params = {
					token: uni.getStorageSync('token'),
				    app_id: self.getAppId()
				};
				uni.showLoading({
					title:'上传中'
				})
				tempList.forEach(function(filePath, fileKey) {
					uni.uploadFile({
						url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
						filePath: filePath,
						name: 'iFile',
						formData: params,
						success: function(res) {
							let result = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
							if (result.code === 1) {
								self.imageList.push(result.data.file_path);
							}
						},
						complete: function() {
							i++;
							if (img_length === i) {
								uni.hideLoading()
								// 所有文件上传完成
							}
						}
					});
				});
			},
			scrollLower() {
				let self = this
				if (self.totalData > self.listData.length) {
					self.page + 1
					self.getData()
				}
			},
			closePopup() {
				this.selectOrderVis = false
			},
			getData() {
				// console.log("token",uni.getStorageSync('token'));
				if (!uni.getStorageSync('token')) {
					this.loading = false;
					return
				}
				let self = this;
				self.loading = true;
				self._get(
					'user.order/lists', {
						dataType: 'all',
						page: self.page,
						pay_source: self.getPlatform(),
						list_rows: self.list_rows
					},
					function(res) {
						self.loading = false;
						self.listData = self.listData.concat(res.data.list.data);
						self.last_page = res.data.list.last_page;
						self.totalData = res.data.list.total
						if (res.data.list.last_page <= 1) {
							self.no_more = true;
						} else {
							self.no_more = false;
						}
						if (res.data.show_alipay) {
							self.showAlipay = true;
						}
						self.isfirst = true;
						uni.stopPullDownRefresh()
					}
				);
			},
			getOrderId() {
				let self = this
				self.selectOrderVis = true
			},
			compSelectOrder(id) {
				let self = this
				self.compForm.order_id = id
				self.selectOrderVis = false
			},
			confirmFunc() {
				let self = this
				if (self.compForm.order_id == '') {
					uni.showModal({
						title: '提示',
						content: '请选择申诉对应订单',
						showCancel: false,
						confirmText: '确定'
					});
					uni.hideLoading();
					return
				}
				let params = {
					...self.compForm
				}
				// if(self.imageList.length !=0){
				// 	self.imageList.forEach(item=>{
				// 		params.images.push(item)
				// 	})
				// }
				self._post('order.complaint/add', {
					...params,
					'images[]' : self.imageList
				}, function(res) {
					if (res.code == 1) {
						uni.showModal({
							title: "成功",
							content: '投诉成功，请等待反馈',
						})
						uni.hideLoading()
						uni.navigateTo({
							url:"/pages/user/custComp/plantlist"
						})
					}
				})
			}

		},
		onLoad(e) {
			this.compForm.type_id = e.id
		},
		onShow() {
			this.getData()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FB;
	}

	.custTextarea {
		background-color: #F7F6FB;
		height: 90rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.descriptionTextarea {
		background-color: #F7F6FB;
		height: 180rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.btns {
		padding: 20rpx 0;
		position: fixed;
		bottom: 32rpx;
		width: 100vw;
		display: flex;
		justify-content: center;
	}

	.btns button,
	.btns button:after {
		height: 88rpx;
		line-height: 88rpx;
		border: 0;
		background-color: #29C0C7;
		color: white;
		width: 90%;
		border-radius: 20rpx;
	}

	.content {
		padding: 20rpx 25rpx;
		border-radius: 25rpx;
		margin: 20rpx;
		background-color: #FFFFFF;

		.top1 {
			color: #2F3131;
			font-size: 28rpx;
		}

		.top2 {
			display: flex;
			height: 50rpx;
			align-items: center;
			border-bottom: 1rpx solid #d6d7d9;
			padding: 25rpx 0;

			.zsname {
				font-size: 34rpx;
				margin-right: 20rpx;
			}
		}


		.top4 {
			display: flex;
			height: 50rpx;
			align-items: center;
			border-bottom: 1rpx solid #d6d7d9;
			padding: 25rpx 0;
			font-size: 34rpx;

			.dianhua {
				margin-right: 20rpx;
			}

			.contactPhone {
				color: #B0B0B0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 85%;
			}
		}

		.top5 {
			display: flex;
			font-size: 34rpx;
			align-items: center;
			border-bottom: 1rpx solid #d6d7d9;

			.contactRelation {
				margin-right: 20rpx;
			}
		}
	}

	.order-list .order-head .state-text {
		padding: 10rpx 12rpx;
		margin-right: 21rpx;
		border-radius: 4rpx;
		background: #FFE7E4;
		font-size: 22rpx;
		color: #F6220C;

	}

	.shop-name {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.order-list {
		margin: 0 24rpx;
		height: 72vh;
	}

	.order-list .item {
		margin-top: 30rpx;
		padding: 30rpx;
		background: #ffffff;
		border-radius: 10rpx;
	}

	.order-list .product-list,
	.order-list .one-product {
		padding: 30rpx 0 27rpx 0;
		height: 150rpx;
	}

	.one-product .pro-info {
		// padding: 0 21rpx 0 37rpx;
		padding: 0 21rpx 0 0;
		display: -webkit-box;
		width: 361rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 26rpx;
		color: #333333;
	}

	.themeBtn {
		color: #11A0AE !important;
		background-color: #fff !important;
		border: 1px solid #11A0AE !important;
	}

	.themeBtn-border {
		background-color: #11a0ae !important;
		color: #fff !important;
		border: none !important;
	}

	.order-list .cover,
	.order-list .cover image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}

	.order-list .total-count {
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}

	.total-count .count {
		padding-top: 16rpx;
		color: #999999;
		font-size: 22rpx;
	}

	.count2 {
		padding-top: 16rpx;
		color: black;
		font-size: 26rpx;
	}

	.product-list .total-count {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.9);
	}

	.product-list .total-count .left-shadow {
		position: absolute;
		top: 0;
		bottom: 0;
		left: -24rpx;
		width: 24rpx;
		overflow: hidden;
	}

	.product-list .total-count .left-shadow::after {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 24rpx;
		right: -12rpx;
		display: block;
		content: '';
		background-image: radial-gradient(rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 80%);
	}

	.order-list .order-bts {
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		align-items: center;
	}

	.order-list .order-bts button {
		padding: 0 30rpx;
		height: 56rpx;
		line-height: 56rpx;
		margin: 0;
		margin-top: 8rpx;
		margin-bottom: 2rpx;
		font-size: 26rpx;
		border: 1px solid #bfc0c2;
		border-radius: 60rpx;
		background: #ffffff;
		white-space: nowrap;
		color: #1c1b1b;
		font-family: PingFang SC;

		// border:none;
		&+button {
			margin-left: 12rpx;
		}
	}

	.order-list .order-bts button::after {
		display: none;
	}

	.item-dianpu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.item-dianpu .icon-jiantou {
		font-size: 24rpx;
		color: #333333;
	}

	.item-d-l {
		display: flex;
	}

	.order-list .order-bts button.btn-border-red {
		border: 1px solid $dominant-color;
		font-size: 24rpx;
		color: $dominant-color;
	}

	.order-list .order-bts button.btn-red {
		background: linear-gradient(90deg, #FF6B6B 4%, #F6220C 100%);
		border-radius: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		color: #ffffff;
		border: none;
	}
</style>